<template>
  <div class="radar">
    <div class="one">
      <p>基础雷达图</p>
      <div id="radar-one"></div>
    </div>
    <div class="two">
      <p>自定义雷达图</p>
      <div id="radar-two"></div>
    </div>
    <div class="three">
      <p>浏览器占比变化</p>
      <div id="radar-three"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data(){
    return {}
  },
  mounted(){
    // 基础雷达图
    this.getOne()
    // 自定义雷达图
    this.getTwo()
    // 浏览器占比变化
    this.getThree()
  },
  methods: {
    // 基础雷达图
    getOne(){
      var chartDom = document.getElementById('radar-one');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        legend: {
          data: ['Allocated Budget', 'Actual Spending']
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: 'Sales', max: 6500 },
            { name: 'Administration', max: 16000 },
            { name: 'Information Technology', max: 30000 },
            { name: 'Customer Support', max: 38000 },
            { name: 'Development', max: 52000 },
            { name: 'Marketing', max: 25000 }
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: 'Allocated Budget'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: 'Actual Spending'
              }
            ]
          }
        ]
      };

      option && myChart.setOption(option);
    },
    // 自定义雷达图
    getTwo(){
      var chartDom = document.getElementById('radar-two');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
        legend: {},
        radar: [
          {
            indicator: [
              { text: 'Indicator1' },
              { text: 'Indicator2' },
              { text: 'Indicator3' },
              { text: 'Indicator4' },
              { text: 'Indicator5' }
            ],
            center: ['25%', '50%'],
            radius: 120,
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            axisName: {
              formatter: '【{value}】',
              color: '#428BD4'
            },
            splitArea: {
              areaStyle: {
                color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 10
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(211, 253, 250, 0.8)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(211, 253, 250, 0.8)'
              }
            }
          },
          {
            indicator: [
              { text: 'Indicator1', max: 150 },
              { text: 'Indicator2', max: 150 },
              { text: 'Indicator3', max: 150 },
              { text: 'Indicator4', max: 120 },
              { text: 'Indicator5', max: 108 },
              { text: 'Indicator6', max: 72 }
            ],
            center: ['75%', '50%'],
            radius: 120,
            axisName: {
              color: '#fff',
              backgroundColor: '#666',
              borderRadius: 3,
              padding: [3, 5]
            }
          }
        ],
        series: [
          {
            type: 'radar',
            emphasis: {
              lineStyle: {
                width: 4
              }
            },
            data: [
              {
                value: [100, 8, 0.4, -80, 2000],
                name: 'Data A'
              },
              {
                value: [60, 5, 0.3, -100, 1500],
                name: 'Data B',
                areaStyle: {
                  color: 'rgba(255, 228, 52, 0.6)'
                }
              }
            ]
          },
          {
            type: 'radar',
            radarIndex: 1,
            data: [
              {
                value: [120, 118, 130, 100, 99, 70],
                name: 'Data C',
                symbol: 'rect',
                symbolSize: 12,
                lineStyle: {
                  type: 'dashed'
                },
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value;
                  }
                }
              },
              {
                value: [100, 93, 50, 90, 70, 60],
                name: 'Data D',
                areaStyle: {
                  color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                    {
                      color: 'rgba(255, 145, 124, 0.1)',
                      offset: 0
                    },
                    {
                      color: 'rgba(255, 145, 124, 0.9)',
                      offset: 1
                    }
                  ])
                }
              }
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    // 浏览器占比变化
    getThree(){
      var chartDom = document.getElementById('radar-three');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: 'Proportion of Browsers',
          subtext: 'Fake Data',
          top: 10,
          left: 10
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          bottom: 10,
          data: (function () {
            var list = [];
            for (var i = 1; i <= 28; i++) {
              list.push(i + 2000 + '');
            }
            return list;
          })()
        },
        visualMap: {
          top: 'middle',
          right: 10,
          color: ['red', 'yellow'],
          calculable: true
        },
        radar: {
          indicator: [
            { text: 'IE8-', max: 400 },
            { text: 'IE9+', max: 400 },
            { text: 'Safari', max: 400 },
            { text: 'Firefox', max: 400 },
            { text: 'Chrome', max: 400 }
          ]
        },
        series: (function () {
          var series = [];
          for (var i = 1; i <= 28; i++) {
            series.push({
              type: 'radar',
              symbol: 'none',
              lineStyle: {
                width: 1
              },
              emphasis: {
                areaStyle: {
                  color: 'rgba(0,250,0,0.3)'
                }
              },
              data: [
                {
                  value: [
                    (40 - i) * 10,
                    (38 - i) * 4 + 60,
                    i * 5 + 10,
                    i * 9,
                    (i * i) / 2
                  ],
                  name: i + 2000 + ''
                }
              ]
            });
          }
          return series;
        })()
      };
      option && myChart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-weight: 700;
  border-bottom: 1px solid #cccccc;
  box-sizing: border-box;
}
.radar {
  width: 100%;
  height: auto;
  .one {
    border: 1px solid #cccccc;
    box-sizing: border-box;
    #radar-one {
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .two {
    border: 1px solid #ccc;
    box-sizing: border-box;
    #radar-two {
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .three {
    border: 1px solid #ccc;
    box-sizing: border-box;
    #radar-three {
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>